<template>
    <span>{{ count }}</span>
    <button @click="count = count + 1">click</button>
    <br />
    <span>{{ age }}</span>
    <button @click="age = age + 1">click</button>
</template>

<script>
/* eslint-disable no-unused-vars */
import { ref, watch, toRefs, reactive } from 'vue';

export default {
    setup () {
        // 用法一 直接监听
        // const count = ref(0);
        // watch(count, (newVal) => {
        //     console.log(newVal);
        // });
        // return {
        //     count,
        // };

        // 用法二 监听一个getter
        // const state = reactive({
        //     count: 1,
        // });
        // watch(
        //     () => state.count,
        //     (newVal, oldVal) => {
        //         console.log(newVal, oldVal);
        //     },
        //     {
        //         immediate: true,
        //     },
        // );

        // 监听多个数据
        const state = reactive({
            count: 1,
            age: 0,
        });
        watch(
            () => [state.count, state.age],
            ([newCount, newAge], [oldCount, oldAge]) => {
                console.log(newCount, newAge, oldCount, oldAge);
            },
        );
        return {
            ...toRefs(state),
        };
    },
};
</script>

<style>
</style>
